<template>
  <!--  首页-->
  <div id="home" v-cloak >
      <n-grid  :cols="6"  item-responsive>
        <n-gi :span="6" class="home-title zwc-content-center" style="height: 95vh;">
          <!-- 背景 -五彩纸 -->
          <vue-particles
              :key="particlesKey"
              style="position: absolute;height: 100vh"
              id="tsparticles"
              :particlesLoaded="particlesLoaded"
              :options='wucaizhixie'
          />
          <kinesis-container>

          <kinesis-element :strength="6">

          <n-h1 class="text-center">DRAGONS</n-h1>
          </kinesis-element>
            <n-space  class="padding-bottom10">
            <n-text depth="3">
              &nbsp;&nbsp;我 是 一 片 云， 投 影 你 波 心 <br/>
              
            </n-text>
            </n-space>
            <n-space justify="center">
              <n-button @click="setDarkTheme">切换主题</n-button>

              <!-- 测试一些第一个登录接口 -->
              <!-- <n-button @click="login" type="primary">登录</n-button> -->
               
              <!-- <router-link to="/article">
                <n-button type="primary" > 博客文章 </n-button>
              </router-link> -->

              <router-link to="/memery">
                <n-button v-if="userdata.username" type="primary" > 回忆录 </n-button>
              </router-link>

              
            </n-space>
          </kinesis-container>

        </n-gi>
        <n-gi :span="10">
          <!-- <n-card embedded :bordered="false" >

            <n-space justify="center" >
              <n-gradient-text 
                :size = "24"
                v-motion-pop-visible
                :gradient = "{ from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }"
              >
                生活充满阳光
              </n-gradient-text>
            </n-space>

            <br>

            <n-space justify="center" >
              <n-text depth="3"></n-text>
            </n-space>
            <br>
          </n-card> -->
          <br>

          <br>
        </n-gi>

        <n-gi style="margin: 15px"   span="6 1025:2  "  v-for="(item,index) in 1" :key="index">
          <a href="http://king.dragons.org.cn" target="_blank">
            <!-- <n-card
                v-motion-pop-visible-once
                title="🧣DRAGONS BLOK"
                hoverable
                :bordered="false"
            >
              <a href="http://king.dragons.org.cn"> Deagons </a>
              <span> © 2024 | </span>
              <a href="https://beian.miit.gov.cn/"> 沪ICP备2024089484号 </a>
            </n-card> -->
          </a>
        </n-gi>
      </n-grid>


</div>
</template>

<script  setup lang="ts">
import {onMounted, onActivated, ref, inject, reactive} from "vue"
import {VaeStore} from "../store";
import {storeToRefs} from "pinia";
import {Container} from "@tsparticles/engine";
import  {lizhi,dakeli,wucaizhixie,xuehua,zhezhao,Absorbers,AmongUs,BackgroundMask,ImageMask} from '../utils/particlesFiles'
import { useDark, useToggle } from '@vueuse/core'
import {onBeforeRouteLeave} from "vue-router";
import { logintest } from '../api/login'


const isDark = useDark()
const particlesKey=ref(0)
const toggleDark = useToggle(isDark)

//获取store中的值
const store = VaeStore();
let {
  isdarkTheme,
  distanceToTop,
  userInfo,
} = storeToRefs(store);
//切换主题，白天黑夜
const setDarkTheme=()=>{
  store.setdarkTheme(!isdarkTheme.value);
  toggleDark();
}

const loginForm = reactive({
  userName: 'zahngsan',
  password: 'lisi'
})
const userdata = reactive({
  across_num: '',
  avatarBase64: '',
  avatar_url: '',
  create_tm: '',
  email: '',
  encrypt_pwd: '',
  encryption_algorithm: '',
  freeze_ornnt: '',
  id: '',
  role_num: '',
  tel_num: '',
  update_tm: '',
  username: '',
  wechat_abt: '',
})

// 登录测试
const login = async () => {
  const data = await logintest(loginForm)
  console.log("data",data)
}

const particlesLoaded = async (container: Container) => {
};

//滚动条回到原位
const remeberScroll=ref(0);
const scrollBy = inject<Function>('scrollBy')
// 跳转路由守卫
onBeforeRouteLeave((to, from, next) => {
  // 将当前滚动条位置进行一个状态保存
  remeberScroll.value = distanceToTop.value;
  next()
})
//   组件激活
onActivated(() => {
  //背景重新渲染一下
  particlesKey.value++;
  //判断滚动条位置是否保存
  if (remeberScroll.value != null && remeberScroll.value > 0) {
    if(scrollBy){
      scrollBy(remeberScroll.value);
    }
  }else{
    //回到最顶部
    if(scrollBy){
      scrollBy(0);
    }
  }
})

// 默认暗黑模式
onMounted(() => {
  //setDarkTheme()

  // @ts-ignore
  userdata.across_num = userInfo._object.userInfo.across_num
  // @ts-ignore
  userdata.avatarBase64 = userInfo._object.userInfo.avatarBase64
  // @ts-ignore
  userdata.avatar_url = userInfo._object.userInfo.avatar_url
  // @ts-ignore
  userdata.create_tm = userInfo._object.userInfo.create_tm
  // @ts-ignore
  userdata.email = userInfo._object.userInfo.email
  // @ts-ignore
  userdata.encrypt_pwd = userInfo._object.userInfo.encrypt_pwd
  // @ts-ignore
  userdata.encryption_algorithm = userInfo._object.userInfo.encryption_algorithm
  // @ts-ignore
  userdata.freeze_ornnt = userInfo._object.userInfo.freeze_ornnt
  // @ts-ignore
  userdata.id = userInfo._object.userInfo.id
  // @ts-ignore
  userdata.role_num = userInfo._object.userInfo.role_num
  // @ts-ignore
  userdata.tel_num = userInfo._object.userInfo.tel_num
  // @ts-ignore
  userdata.update_tm = userInfo._object.userInfo.update_tm
  // @ts-ignore
  userdata.username = userInfo._object.userInfo.username
  // @ts-ignore
  userdata.wechat_abt = userInfo._object.userInfo.wechat_abt
})
</script>

<style lang="less" scoped>
#home{
  padding:0px 10px;
  .home-title{
    position: relative;
    height: 90vh;


  }
  .home-icon{
    position: absolute;
    top: 20px;
    bottom: 0px;
   font-size: 14px;
  }
  .padding-bottom10{
    padding-bottom: 10px;
  }

}

</style>
